<template>
  <div
    v-if="followUser.relationship == -1"
    class="meFollowItem"
    @click="toUser"
  >
    <div class="avater">
      <van-image
        width="40"
        height="40"
        round
        :src="followUser.user.avatar_medium"
        lazy-load
      />
      <div class="verified" v-if="followUser.user.verified_image">
        <van-image
          width="15"
          height="15"
          :src="followUser.user.verified_image"
          lazy-load
        />
      </div>
    </div>
    <div class="information">
      <div class="top">
        <div class="nickname">{{ followUser.user.nick }}</div>
        <div class="lv">LV.{{ followUser.user.lvl }}</div>
      </div>
      <div class="introduction">{{ followUser.user.introduction }}</div>
    </div>
    <div v-if="!isFollow" class="follow" @click.stop="follow(item)">已关注</div>
    <div v-else class="isfollow" @click.stop="noFollow(item)">已关注</div>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import axios from "axios";
import { onMounted, ref } from "vue";

const props = defineProps(["item"]);

const followUser = ref({
  user: {
    user_id: "",
    avatar_medium: "",
    nick: "",
    lvl: "",
    introduction: "",
    verified_url: "",
    verified_image: "",
  },
  relationship: -100,
});

onMounted(async () => {
  // console.log(props.item);

  let res = await axios.get(
    `https://apis.netstart.cn/douguo/user/info/${props.item}`
  );
  if (res.data.state == "success") {
    // console.log(res.data.result);
    followUser.value = res.data.result;
  } else {
    followUser.value = {
      user: {
        user_id: "",
        avatar_medium: "",
        nick: "用户已注销",
        lvl: "6",
        introduction: "豆龄0岁",
        verified_url: "",
        verified_image: "",
      },
      relationship: -1,
    };
  }
});

const toUser = () => {
  // console.log("toUser");
  router.push({ path: "/user", query: { id: props.item } });
};

const isFollow = ref(true);

const follow = (id: string) => {
  // console.log("follow");
  let follows = new Set(JSON.parse(localStorage.getItem("follow") || "[]"));
  follows.add(id);
  localStorage.setItem("follow", JSON.stringify(Array.from(follows)));
  isFollow.value = true;
};

const noFollow = (id: string) => {
  let follows = JSON.parse(localStorage.getItem("follow") || "[]").filter(
    (o: string) => o != id
  );
  localStorage.setItem("follow", JSON.stringify(Array.from(follows)));
  isFollow.value = false;
};
</script>

<style lang="scss" scoped>
.meFollowItem {
  height: 70px;
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: white;

  .avater {
    margin-left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid #fafafa;
    position: relative;

    .verified {
      position: absolute;
      bottom: -3px;
      right: -3px;
      width: 15px;
      height: 15px;
    }
  }

  .information {
    display: flex;
    flex-direction: column;
    margin-left: 10px;

    .top {
      display: flex;
      align-items: center;
      margin-bottom: 5px;

      .nickname {
        // font-weight: bold;
        font-size: 16px;
      }

      .lv {
        font-size: 12px;
        font-style: italic;
        color: #c9a63b;
        margin-left: 5px;
        font-weight: bold;
      }
    }

    .introduction {
      color: #999;
      font-size: 14px;
      width: 200px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .isfollow {
    width: 80px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    border-radius: 18px;
    background-color: #f6f6f6;
    color: #999;
    margin-left: 6px;
  }

  .follow {
    width: 80px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    border-radius: 18px;
    background-color: #ffc536;
    margin-left: 6px;
  }
}
</style>
